<template>
    <!-- 列表页面 -->
    <div class="tableSample" v-if="!showAdd && !showEdit && !showPic && !showText">
        <div class="header">
            <div class="header-left">
                <p class="title">微信自动回复
                    <el-button type="primary" plain style="margin-left: 30px;" @click="handleAdd">添加</el-button>
                </p>
            </div>
        </div>
        <!-- 表格 -->
        <lin-table
                border
                :tableColumn="tableColumn"
                :tableData="tableData"
                :operate="operate"
                @handleList="handleList"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                v-loading="loading"></lin-table>
    </div>
    <!-- 添加页面 -->
    <reply-add v-else-if="showAdd" @addClose="addClose" ></reply-add>
    <!-- 修改页面 -->
    <reply-edit v-else-if="showEdit" @editClose="editClose" :replyId="replyId" ></reply-edit>
    <!-- 图文回复 -->
    <pic v-else-if="showPic" @picClose="picClose" :replyId="replyId" ></pic>
    <!-- 文字回复 -->
    <text-edit v-else-if="showText" @textClose="textClose" :replyId="replyId" ></text-edit>

</template>

<script>
import reply from '@/models/reply'
import LinTable from '@/components/base/table/lin-table'
import ReplyAdd from './ReplyAdd'
import ReplyEdit from './ReplyEdit'
import Pic from './Pic'
import TextEdit from './TextEdit'

export default {
  components: {
    ReplyAdd,
    LinTable,
    ReplyEdit,
    Pic,
    TextEdit,
  },
  data() {
    return {
      tableColumn: [
        { prop: 'title', label: '标题' },
        { prop: 'typeid', label: '回复类型' },
        { prop: 'status', label: '回复时机' },
      ],
      tableData: [],
      operate: [
        { name: '回复信息', func: 'handleList', type: 'primary' },
        { name: '编辑', func: 'handleEdit', type: 'primary' },
        { name: '删除', func: 'handleDelete', type: 'danger' },
      ],
      loading: false,
      showAdd: false,
      showEdit: false,
      showPic: false,
      showText: false,
      replyId: 1,
    }
  },
  computed: {},
  created() {
    this.loading = true
    // 获取数据
    this._getTableData()
    this.loading = false
  },
  methods: {
    // 获取数据
    async _getTableData() {
      const res = await reply.getReplies()
      this.tableData = res
    },
    handleAdd() {
      this.showAdd = true
    },
    rowClick(val) {
      console.log(val)
    },
    addClose() {
      this.showAdd = false
      this._getTableData()
    },
    editClose() {
      this.showEdit = false
      this._getTableData()
    },
    picClose() {
      this.showPic = false
      this._getTableData()
    },
    textClose() {
      this.showText = false
      this._getTableData()
    },
    handleEdit(val) {
      this.showEdit = true
      this.replyId = Number(val.row.id)
    },
    handleList(val) {
      if (val.row.typeid === '文字') {
        this.showText = true
        this.replyId = Number(val.row.id)
      } else {
        this.showPic = true
        this.replyId = Number(val.row.id)
      }
    },
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          this.loading = true; // eslint-disable-line
          const info = {
            ids: [val.row.id],
          }
          const res = await reply.delectReply(info)
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData()
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;

                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .table-main {
            padding: 0 30px;
            margin-top: 30px;
        }

        .top-operate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            margin-top: 30px;
        }

        .sort-input {
            width: 50px;
            background: none;
            justify-content: space-around;
        }

        .table-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cell-icon {
                cursor: pointer;
                color: #3963bc;
                font-size: 16px;
            }

            .cell-icon-edit {
                display: flex;
                margin-left: 20px;
                width: 50px;
                justify-content: space-between;

                .cell-cancel {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                }

                .cell-save {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                    margin-right: -20px;
                }
            }
        }

        .m-20 {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .summary {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;

            img {
                width: 135px;
                height: 200px;
            }

            .demo-table-expand {
                font-size: 0;
                margin-left: 30px;
                display: flex;
                flex-direction: column;

                label {
                    width: 90px;
                    color: #99a9bf;
                }

                .el-form-item {
                    margin-right: 0;
                    margin-bottom: 0;
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
    // dialog
    .tableSample /deep/ .el-dialog__footer {
        text-align: left;
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__header {
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__body {
        padding: 30px;
    }
</style>
